<template>
    <div>
        <div style="margin-left: 20px; margin-top: 20px;">
            <i class="el-icon-arrow-left" @click="goBack()" style="color: gray;">返回</i>
            <span style="margin-left: 20px;">文档详情</span>
        </div>
        <!-- 文档基本信息 -->
        <div class="document-chunks-container">
            <el-card class="document-info">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="info-item">
                            <label>文档名称：</label>
                            <span>{{ document.name }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-item">
                            <label>文件名：</label>
                            <span>{{ document.fileName }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-item">
                            <label>分片数量：</label>
                            <span>{{ document.chunkCount }}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-item">
                            <label>向量化状态：</label>
                            <el-tag :type="statusType(document.vectorStatus)">
                                {{ document.vectorStatus }}
                            </el-tag>
                        </div>
                    </el-col>
                </el-row>
            </el-card>

            <!-- 分片卡片列表 -->
            <div class="chunk-list">
                <el-row :gutter="20">
                    <el-col v-for="(chunk, index) in chunks" :key="chunk.id" :xs="24" :sm="12" :md="8" :lg="6"
                        class="chunk-col">
                        <el-card class="fixed-size-card">
                            <!-- 启用开关 -->
                            <div style="display: flex;justify-content: space-between;font-size: 12px;">
                                <span>{{ index }}</span>
                                <el-switch v-model="chunk.enabled" active-color="#13ce66"
                                    @change="handleToggleChunk(index)" />
                            </div>
                            <!-- 分片内容 -->
                            <div class="chunk-content"  @click="detailSilce(chunk.content)">
                                {{ chunk.content }}
                            </div>

                            <!-- 统计信息 -->
                            <div class="chunk-stats">
                                <div class="stat-item">
                                    <i class="el-icon-document"></i>
                                    {{ chunk.charCount }} 字符
                                </div>
                                <div class="stat-item">
                                    <i class="el-icon-connection"></i>
                                    {{ chunk.hitCount }} 命中
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <el-pagination style="" background layout="total, prev, pager, next, sizes"
                :current-page="pagination.current" :page-sizes="[12]" :page-size="pagination.size"
                :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                class="chunk-pagination right-pagination" />
            <el-dialog title="详细信息" :visible.sync="dialogVisible" width="40%">
                <div>
                    {{ detailContent }}
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false" size="small">关闭</el-button>
                </span>
            </el-dialog>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pagination: {
                current: 1,
                size: 12,
                total: 20
            },
            docId: 1,
            knowId: 1,
            document: {
                id: 1,
                name: '示例文档',
                fileName: 'example.pdf',
                chunkCount: 12,
                vectorStatus: 'success'
            },
            totalChunk: null,
            chunks: null,
            dialogVisible:false,
            detailContent:"",
        }
    },
    computed: {
        getKnowId() {
            return this.$route.params.knowId;
        },
        getDocId() {
            return this.$route.params.docId;
        }
    },
    created() {
        this.initData();
    },
    methods: {
        detailSilce(content){
            this.dialogVisible = true;
            this.detailContent = content;
        },

        goBack() {
            if (window.history.length > 1) {
                this.$router.go(-1);
            } else {
                // 可选：可以重定向到某个默认页面，例如首页  
                this.$router.push('/');
            }
        },
        toDoc() {
            this.$router.push({
                path: "/Docment",
                query: {
                    id: this.knowId
                }
            })
        },
        initData() {
            this.docId = this.$route.params.docId;
            this.knowId = this.$route.params.knowId;
            this.totalChunk = Array.from({ length: 26 }, (_, i) => ({
                id: i + 1,
                content: '这是分片内容示例，展示向量化后的文本阿达大大大大大大片段。'.repeat(Math.random() * 5 + 3),
                charCount: Math.floor(Math.random() * 500 + 100),
                hitCount: Math.floor(Math.random() * 20),
                enabled: true,
                expand: false
            }))
            this.pagination.total = this.totalChunk.length
            this.chunks = this.paginate(this.totalChunk, this.pagination.size, this.pagination.current, this.pagination.total)
        },
        paginate(array, page_size, page_number, total) {
            // human-readable page numbers usually start with 1, so we reduce 1 in the first argument  
            return array.slice((page_number - 1) * page_size, Math.min(page_number * page_size, total));
        },
        statusType(status) {
            const types = {
                success: 'success',
                processing: 'primary',
                error: 'danger',
                pending: 'warning'
            }
            return types[status] || 'info'
        },

        handleToggleChunk(index) {
            this.$confirm(`确认${this.chunks[index].enabled ? '启用' : '禁用'}该分片？`, '提示', {
                type: 'warning'
            }).catch(() => {
                this.chunks[index].enabled = !this.chunks[index].enabled
            })
        },
        handleSizeChange(size) {
            this.pagination.size = size
            this.pagination.current = 1
        },

        handleCurrentChange(current) {
            this.pagination.current = current
            this.chunks = this.paginate(this.totalChunk, this.pagination.size, this.pagination.current, this.pagination.total);
        },

    }
}
</script>

<style scoped>
/* 新增固定尺寸样式 */
.fixed-size-card {
    width: 100%;
    height: 240px;
    /* 固定高度 */
    display: flex;
    flex-direction: column;
}

.document-chunks-container {
    padding: 20px;
}

.document-info {
    margin-bottom: 20px;
}

.info-item {
    margin: 10px 0;
    font-size: 14px;
}

.info-item label {
    color: #909399;
    margin-right: 8px;
}

.chunk-col {
    margin-bottom: 20px;
}

.chunk-content {
    margin-top: 10px;
    height: 150px;
    font-size: 13px;
    line-height: 1.5;
    color: #606266;
    overflow: hidden;
    overflow-y: auto;
    /* 添加滚动条 */
    flex: 1;
    margin-bottom: 8px;
}

.expand-btn {
    color: #409eff;
    font-size: 12px;
    margin-top: 8px;
    text-align: right;
}

/* 调整统计信息位置 */
.chunk-stats {
    height: 20%;
    padding-top: 10px;
    border-top: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
}

.stat-item {
    font-size: 12px;
    color: #909399;
}

.stat-item i {
    margin-right: 5px;
}

/* 修改分页样式 */
.right-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}



/* 响应式调整 */
@media (max-width: 768px) {
    .right-pagination {
        justify-content: center;
    }

    .right-pagination ::v-deep .el-pagination__total {
        position: static;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }
}
</style>